body {
  display: flex;
  flex-wrap: wrap;
}
/*------------------------*/
/*--------COMPTEUR--------*/
/*------------------------*/
.compteur {
  display: flex;
  width : 20%;
  height : 140px;
  padding-top: 75px;
  margin : auto;
}

.compteur p {
  text-align: center;
  vertical-align: middle;
  font-size : 20px;
  font-family: 'Montserrat', sans-serif;
  line-height: 1.625;
  font-weight: 200;
  color: #475465;
  hyphens: auto;
  word-break: break-word;
}

.compteur p b {
  font-size: 30px;
}

/*------------------------*/
/*--------BANNIERE--------*/
/*------------------------*/
section#banniere {
  display: flex;
  flex-wrap: wrap;
  width : 66%;
}

section#banniere .image {
  width : 60%;
  margin: auto;
  height : 50%;
}

section#banniere .image img {
  width : 100%;
}

section#banniere .logline {
  margin: 0px auto;
}

section#banniere .logline p {
  margin: auto;
  font-family: 'Montserrat';
  font-size: 20px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  line-height: 1.625;
  font-weight: 200;
  color: #475465;
  hyphens: auto;
  word-break: break-word;
}

/*------------------------*/
/*--------SERVICES--------*/
/*------------------------*/
section#services {
  width : 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  margin : 0px auto;
}

section#services .container {
  width : 31%;
  height : 100%;
  display: flex;
  flex-wrap: wrap;
  margin : 50px auto;
  position: relative;
}

section#services .under {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #FF584D;
}

section#services .over {
  border : solid 1px black;
  z-index: 1;
  background-color: white;
  transition: 0.4s;
  height: 600px;
}

section#services .over:hover {
  transform: translateY(-8px) translateX(-8px);
}

section#services h2 {
  width : 100%;
  font-family : 'butler_extrabold';
  font-size: 40px;
  margin : auto;
  text-align: center;
  color : #556C96;
}

section#services .container h3 {
  font-family: 'Montserrat';
  color : #475465;
  margin : 30px auto;
  text-align: center;
  font-size: 25px;
}

section#services .container .description {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  text-align: justify;
  margin : 10px 25px;
}

section#services .container .liste {
  margin:0px 45px;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
}

section#services .container .emoji{
  font-size : 35px;
}

section#services .container .bottom-services{
  margin:50px auto 10px;
  display: flex;
  flex-wrap: wrap;
}

section#services .container .bottom-services .button{
  margin : auto;
}

section#services .container .bottom-services .prix{
  width : 100%;
  text-align: center;
}

section#services .container input {
  border : solid 1px black;
  cursor: pointer;
  background-color: white;
  padding : 10px;
  font-size: 16px;
  margin :auto;
}

section#services .container input:hover {
  border : solid 1px #FF584D;
  color : #FF584D;
}

/*------------------------*/
/*-------RÉFÉRENCES-------*/
/*------------------------*/

section#references h2 {
  width : 100%;
  font-family : 'butler_extrabold';
  font-size: 40px;
  margin : auto auto 40px auto ;
  text-align: center;
  color : #556C96;
}

section#references {
  width : 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  margin : 0px auto;
}

section#references .container {
  width : 49.5%;
  display: flex;
  flex-wrap: wrap;
  margin : 1px 1px;
  position: relative;
  border : solid 1px black;
  z-index: 2;
  background-color: white;
  transition: 0.4s;
  height: auto;
}

section#references .container h3 {
  font-family: 'Montserrat';
  color: #475465;
  margin: 30px auto;
  text-align: center;
  font-size: 25px;
}

section#references .container ul {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  text-align: justify;
  margin : 10px 25px;
}

section#references .container p {
  color : #FF584D;
  font-family: 'Montserrat', sans-serif;
  font-size: 25px;
  text-align: justify;
  margin : 20px auto;
}

section#references .container:hover {
  border : solid 1px #FF584D;
}
section#references .container:hover h3 {
  color : #FF584D;
}


/*----------------------------*/
/*--------RESPONSIVE----------*/
/*----------------------------*/

@media screen and (max-width: 1400px){
  section#banniere{
    width : 100%;
    order : 2;
  }

  section#banniere .logline p{
    margin-top: 0px;
}

  .compteur{
    order : 1;
    width : 100%;
    text-align: center;
  }

  .compteur p{
    margin : auto;
  }

  section#banniere .image{
    margin: 0px auto 0px;
  }

  section#services{
    order : 3;
    margin: 0 auto;
  }

  section#services .container input{
    right: 145px;
  }

  section#services .over{
    height:650px;
  }

  section#services .container .bottom-services .prix{
    right: 100px;
  }

  section#contact{
    order : 5;
  }
  footer {
    order : 6;
  }

  section#services .over:hover {
    transform: translateY(0px) translateX(0px);
  }
}

@media screen and (max-width: 1250px){
  section#services .container{
    width : 80%;
    margin : 10px auto;
    height: 100%;
  }
  section#services .container .liste{
    text-align: center;
    font-size: 25px;
  }

  section#services .container .description{
    font-size: 25px;
    width : 75%;
    margin : auto;
  }

  section#services .container input {
    font-size: 18px;
  }

  section#services .container .bottom-services .prix {
    right: 320px;
    font-size: 17px;
  }
}

@media screen and (max-width: 950px){
  section#services .container .emoji{
    font-size: 25px;
  }
  section#services .container .description{
    font-size: 20px;
  }
  section#services .container .liste{
    font-size: 20px;
  }
  section#services .container .liste{
    margin : 0px 2px;
  }
}

@media screen and (max-width: 650px){
  section#services .container{
    width : 95%;
  }
  section#banniere .image {
    width: 100%;
  }
  section#banniere .image img{
    margin-top: 20px;
  }
  section#banniere .logline p{
    font-size: 15px;
  }
}

@media screen and (max-width : 520px) {
  section#services .container .description{
    font-size: 18px;
  }
  section#services .container .liste{
    font-size: 18px;
  }
  section#services .container input{
    font-size: 15px;
  }
}

@media screen and (max-width : 490px) {
  section#services h2{
    font-size: 30px;
  }
}

@media screen and (max-width: 450px){
  section#services .container .emoji{
    font-size: 20px;
  }
  section#services .container .description{
    font-size: 15px;
  }
  section#services .container .liste{
    font-size: 15px;
  }
}

@media screen and (max-width: 355px){
  section#banniere .logline p{
    font-size: 10px;
  }
  section#services h2{
    font-size: 20px;
  }
  section#services .container .bottom-services{
    margin: 25px auto 0px;
  }
  section#services .container h3{
    font-size : 20px;
  }
}

@media screen and (max-width: 311px){
  section#services .container .emoji{
    font-size: 18px;
  }
  section#services .container .description{
    font-size: 14px;
    width: 90%;
  }
  section#services .container .liste{
    font-size: 14px;
  }

  section#services .container .bottom-services{
    margin: 20px auto 0px;
  }
  section#services .container h3{
    font-size : 18px;
  }

  section#services .over{
    height: 100%;
  }
}

@media screen and (max-width: 290px){
  section#services h2{
    font-size: 17px;
  }

  .compteur p {
    font-size: 13px;
  }

  .compteur p b{
    font-size: 20px;
  }

  section#banniere .image img{
    margin-top: 0px;
  }
}